<template>
  <div>
    <!-- 数据表格 -->
    <a-table
      :data-source="list"
      size="middle"
      :columns="columns"
      :pagination="pagination"
      bordered
      row-key="id"
      :scroll="{
        x: 'max-content'
      }"
      @change="changePage"
    >
      <template #title>
        <a-space wrap class="search-box">
          <a-input
            v-model:value="listQuery['%name%']"
            placeholder="名称"
            class="search-input-item"
            @press-enter="loadData"
          />
          <a-tooltip title="按住 Ctr 或者 Alt/Option 键点击按钮快速回到第一页">
            <a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
          </a-tooltip>
          <a-button type="primary" @click="handleAdd">新增</a-button>
        </a-space>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'operation'">
          <a-space>
            <a-button size="small" type="primary" @click="handleEdit(record)">编辑</a-button>
            <a-button type="primary" danger size="small" @click="handleDelete(record)">删除</a-button>
          </a-space>
        </template>
      </template>
    </a-table>
    <!-- 编辑区 -->
    <a-modal
      v-model:open="editVisible"
      destroy-on-close
      :confirm-loading="confirmLoading"
      width="60vw"
      title="编辑"
      :mask-closable="false"
      @ok="handleEditUserOk"
    >
      <a-form ref="editForm" :rules="rules" :model="temp" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="名称" name="name">
          <a-input v-model:value="temp.name" :max-length="50" placeholder="名称" />
        </a-form-item>
        <a-form-item name="workspace">
          <template #label>
            <a-tooltip>
              工作空间
              <template #title> 配置工作空间权限,用户限制用户只能对应的工作空间里面操作对应的功能</template>
              <QuestionCircleOutlined v-if="!temp.id" />
            </a-tooltip>
          </template>
          <transfer ref="transferRef" :tree-data="workspaceList" :edit-key="temp.targetKeys" />
        </a-form-item>
        <a-form-item name="prohibitExecute">
          <template #label>
            <a-tooltip>
              禁用时段
              <template #title> 配置后可以控制想要在某个时间段禁止用户操作某些功能，优先判断禁用时段</template>
              <QuestionCircleOutlined v-if="!temp.id" />
            </a-tooltip>
          </template>
          <a-form-item-rest>
            <a-space direction="vertical" style="width: 100%">
              <div v-for="(item, index) in temp.prohibitExecuteArray" :key="item.key">
                <a-space direction="vertical" class="item-info" style="width: 100%">
                  <a-range-picker
                    v-model:value="item.moments"
                    style="width: 100%"
                    :disabled-date="
                      (current) => {
                        if (current < dayjs().subtract(1, 'days')) {
                          return true
                        }

                        return temp.prohibitExecuteArray.filter((arrayItem, arrayIndex) => {
                          if (arrayIndex === index) {
                            return false
                          }
                          if (arrayItem.moments && arrayItem.moments.length === 2) {
                            if (current > arrayItem.moments[0] && current < arrayItem.moments[1]) {
                              return true
                            }
                          }
                          return false
                        }).length
                      }
                    "
                    :show-time="{ format: 'HH:mm:ss' }"
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :placeholder="['开始时间', '结束时间']"
                  />

                  <div>
                    <a-input v-model:value="item.reason" placeholder="禁用原因" allow-clear />
                  </div>
                </a-space>

                <div
                  class="item-icon"
                  @click="
                    () => {
                      temp.prohibitExecuteArray.splice(index, 1)
                    }
                  "
                >
                  <MinusCircleOutlined style="color: #ff0000" />
                </div>
              </div>
            </a-space>
            <a-button
              type="primary"
              @click="
                () => {
                  temp.prohibitExecuteArray.push({})
                }
              "
              >新增
            </a-button>
          </a-form-item-rest>
        </a-form-item>
        <a-form-item name="allowExecute">
          <template #label>
            <a-tooltip>
              允许时段
              <template #title>
                优先判断禁用时段,再判断允许时段。配置允许时段后用户只能在对应的时段执行相应功能的操作
              </template>
              <QuestionCircleOutlined v-if="!temp.id" />
            </a-tooltip>
          </template>
          <a-form-item-rest>
            <a-space direction="vertical" style="width: 100%">
              <div v-for="(item, index) in temp.allowExecuteArray" :key="item.key">
                <a-space direction="vertical" class="item-info" style="width: 100%">
                  <div>
                    <a-select
                      v-model:value="item.week"
                      placeholder="请选择可以执行的星期"
                      mode="multiple"
                      style="width: 100%"
                    >
                      <a-select-option
                        v-for="weekItem in weeks"
                        :key="weekItem.value"
                        :disabled="
                          temp.allowExecuteArray.filter((arrayItem, arrayIndex) => {
                            if (arrayIndex === index) {
                              return false
                            }
                            return arrayItem.week && arrayItem.week.includes(weekItem.value)
                          }).length > 0
                        "
                      >
                        {{ weekItem.name }}
                      </a-select-option>
                    </a-select>
                  </div>
                  <div>
                    <a-space>
                      <a-time-picker v-model:value="item.startTime" placeholder="开始时间" value-format="HH:mm:ss" />
                      <a-time-picker v-model:value="item.endTime" placeholder="结束时间" value-format="HH:mm:ss" />
                    </a-space>
                  </div>
                </a-space>
                <div
                  class="item-icon"
                  @click="
                    () => {
                      temp.allowExecuteArray.splice(index, 1)
                    }
                  "
                >
                  <MinusCircleOutlined style="color: #ff0000" />
                </div>
              </div>
            </a-space>
            <a-button
              type="primary"
              @click="
                () => {
                  temp.allowExecuteArray.push({})
                }
              "
              >新增
            </a-button>
          </a-form-item-rest>
        </a-form-item>

        <a-form-item label="描述" name="description">
          <a-textarea v-model:value="temp.description" :max-length="200" :rows="5" placeholder="描述" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import { workspaceList } from '@/api/user/user'
import { getList, editPermissionGroup, deletePermissionGroup } from '@/api/user/user-permission'
import { getWorkSpaceListAll } from '@/api/workspace'
import { getMonitorOperateTypeList } from '@/api/monitor'
import dayjs from 'dayjs'
import { CHANGE_PAGE, COMPUTED_PAGINATION, PAGE_DEFAULT_LIST_QUERY, parseTime } from '@/utils/const'
import Transfer from '@/components/compositionTransfer/composition-transfer.vue'

export default {
  components: {
    Transfer
  },
  data() {
    return {
      loading: false,
      list: [],
      workspaceList: [],

      methodFeature: [],
      temp: {},
      weeks: [
        { value: 1, name: '周一' },
        { value: 2, name: '周二' },
        { value: 3, name: '周三' },
        { value: 4, name: '周四' },
        { value: 5, name: '周五' },
        { value: 6, name: '周六' },
        { value: 7, name: '周日' }
      ],
      editVisible: false,
      listQuery: Object.assign({}, PAGE_DEFAULT_LIST_QUERY),
      columns: [
        { title: 'id', dataIndex: 'id', ellipsis: true },
        { title: '名称', dataIndex: 'name', ellipsis: true },
        { title: '描述', dataIndex: 'description', ellipsis: true },

        {
          title: '修改人',
          dataIndex: 'modifyUser',
          ellipsis: true,
          width: 150
        },
        {
          title: '修改时间',
          dataIndex: 'modifyTimeMillis',
          sorter: true,
          ellipsis: true,
          customRender: ({ text }) => {
            return parseTime(text)
          },
          width: 170
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'operation',

          width: 120
        }
      ],
      // 表单校验规则
      rules: {
        name: [{ required: true, message: '请输入权限组名称', trigger: 'blur' }]
      },
      confirmLoading: false
    }
  },
  computed: {
    pagination() {
      return COMPUTED_PAGINATION(this.listQuery)
    }
  },
  watch: {},
  created() {
    this.loadData()
    this.loadOptTypeData()
  },
  methods: {
    dayjs,
    // 加载数据
    loadData(pointerEvent) {
      this.loading = true
      this.listQuery.page = pointerEvent?.altKey || pointerEvent?.ctrlKey ? 1 : this.listQuery.page
      getList(this.listQuery).then((res) => {
        if (res.code === 200) {
          this.list = res.data.result
          this.listQuery.total = res.data.total
        }
        this.loading = false
      })
    },
    // 加载工作空间数据
    loadWorkSpaceListAll() {
      return new Promise((callback) => {
        this.workspaceList = []
        getWorkSpaceListAll().then((res) => {
          if (res.code === 200) {
            res.data.forEach((element) => {
              const children = this.methodFeature.map((item) => {
                return {
                  key: element.id + '-' + item.value,
                  title: item.title + '权限',
                  parentId: element.id
                }
              })
              children.push({
                key: element.id + '-sshCommandNotLimited',
                title: 'SSH 终端命令无限制',
                parentId: element.id
              })
              this.workspaceList.push({
                key: element.id,
                title: element.name,
                children: children,
                parentId: 0
              })
            })
            callback()
          }
        })
      })
    },
    // 加载操作类型数据
    loadOptTypeData() {
      getMonitorOperateTypeList().then((res) => {
        if (res.code === 200) {
          this.methodFeature = res.data.methodFeature
        }
      })
    },

    // 新增权限组
    handleAdd() {
      this.temp = {
        prohibitExecuteArray: [],
        allowExecuteArray: [],
        targetKeys: []
      }

      this.loadWorkSpaceListAll()
      this.editVisible = true
      this.$refs['editForm'] && this.$refs['editForm'].resetFields()
    },
    // 修改权限组
    handleEdit(record) {
      workspaceList(record.id).then((res) => {
        this.loadWorkSpaceListAll().then(() => {
          this.temp = {
            ...record,
            targetKeys: res.data.map((element) => {
              return element.workspaceId
            }),
            prohibitExecuteArray: JSON.parse(record.prohibitExecute).map((item) => {
              return {
                reason: item.reason,
                moments: [item.startTime, item.endTime]
              }
            }),
            allowExecuteArray: JSON.parse(record.allowExecute)
          }
          delete this.temp.prohibitExecute, delete this.temp.allowExecute
          this.editVisible = true
        })
      })
    },
    // 提交用户数据
    handleEditUserOk() {
      // 检验表单
      this.$refs['editForm'].validate().then(() => {
        const transferRef = this.$refs.transferRef
        const emitKeys = transferRef && transferRef.emitKeys
        const temp = { ...this.temp }
        //
        temp.prohibitExecute = JSON.stringify(
          (temp.prohibitExecuteArray || []).map((item) => {
            return {
              startTime: item.moments && item.moments[0],
              endTime: item.moments && item.moments[1],
              reason: item.reason
            }
          })
        )
        delete temp.prohibitExecuteArray
        //
        temp.allowExecute = JSON.stringify(
          (temp.allowExecuteArray || []).map((item) => {
            return {
              endTime: item.endTime,
              startTime: item.startTime,
              week: item.week
            }
          })
        )
        delete temp.allowExecuteArray
        if (!emitKeys || emitKeys.length <= 0) {
          $notification.error({
            message: '请选择工作空间'
          })
          return false
        }
        //
        temp.workspace = JSON.stringify(emitKeys)
        delete temp.targetKeys
        // console.log(temp, emitKeys)
        // 需要判断当前操作是【新增】还是【修改】
        this.confirmLoading = true
        editPermissionGroup(temp)
          .then((res) => {
            if (res.code === 200) {
              $notification.success({
                message: res.msg
              })
              this.$refs['editForm'].resetFields()
              this.editVisible = false
              this.loadData()
            }
          })
          .finally(() => {
            this.confirmLoading = false
          })
      })
    },
    // 删除
    handleDelete(record) {
      $confirm({
        title: '系统提示',
        zIndex: 1009,
        content: '真的要删除权限组么？',
        okText: '确认',
        cancelText: '取消',
        onOk: () => {
          return deletePermissionGroup(record.id).then((res) => {
            if (res.code === 200) {
              $notification.success({
                message: res.msg
              })
              this.loadData()
            }
          })
        }
      })
    },

    // 分页、排序、筛选变化时触发
    changePage(pagination, filters, sorter) {
      this.listQuery = CHANGE_PAGE(this.listQuery, { pagination, sorter })
      this.loadData()
    },
    checkTipUserName() {
      if (this.temp?.id === 'demo') {
        $confirm({
          title: '系统提示',
          zIndex: 1009,
          content:
            'demo 账号是系统特定演示使用的账号,系统默认将对 demo 账号限制很多权限。非演示场景不建议使用 demo 账号',
          okText: '确认',
          cancelText: '取消',

          onCancel: () => {
            this.temp.id = ''
          }
        })
      }
    }
  }
}
</script>

<style scoped>
.item-info {
  /* display: inline-block; */
  width: 90%;
}
.item-icon {
  display: inline-block;
  width: 10%;
  text-align: center;
}
</style>
